<script setup>
// 引入 Vue 的 ref 函数，用于创建响应式变量
import { ref } from 'vue';

// 初始化课程列表，使用 ref 包装成响应式对象
const list = ref([
  {
    id: 1, // 课程唯一标识符
    subject: 'Vue.Js前端开发实践', // 课程名称
    Grade: 3, // 课程分数
    major: '专业课', // 课程种类
    status: false, // 课程完成状态（false 表示未完成）
  },
]);

// 删除课程的函数
let remove = (id, status) => {
  if (status) {
    // 如果课程已完成，则从列表中移除
    list.value = list.value.filter((item) => item.id !== id);
  } else {
    // 如果课程未完成，提示用户先完成修读
    alert('请先完成修读再删除');
  }
};

// 定义输入框绑定的课程名，初始值为空字符串
let subject = ref('');
// 定义输入框绑定的课程分数，初始值为空字符串
let Grade = ref('');
// 定义下拉框绑定的课程种类，默认值为“专业课”
let selectedOption = ref('专业课'); 

// 定义课程种类选项列表
let options = ref([
  { majorCode: '0', major: '专业课' }, // 选项 1：专业课
  { majorCode: '1', major: '通识课' }, // 选项 2：通识课
  { majorCode: '2', major: '选修课' }, // 选项 3：选修课
]);

// 添加课程的函数
let add = () => {
  if (subject.value === '') {
    // 检查课程名是否为空，若为空则提示用户
    alert('课程名不能为空');
    return;
  }
  if (Grade.value === '' || Grade.value < 0 || Grade.value > 100) {
    // 检查课程分数是否有效，无效时提示用户
    alert('该课程分数无效');
    return;
  }

  // 计算下一个课程 ID，确保唯一性
  let nextId = list.value.length > 0 ? Math.max(...list.value.map(item => item.id)) + 1 : 1;

  // 创建新课程对象
  const obj = {
    id: nextId,
    subject: subject.value,
    Grade: Grade.value,
    major: selectedOption.value, // 使用下拉框选择的课程种类
    status: false, // 新增课程默认为未完成状态
  };

  // 将新课程对象添加到列表中
  list.value.push(obj);

  // 清空输入框和下拉框，恢复默认值
  subject.value = '';
  Grade.value = '';
  selectedOption.value = '专业课'; 
};
</script>

<template>
  <!-- 卡片容器 -->
  <div class="card">
    <!-- 标题区域 -->
    <div class="card-header">课程修读表</div>
    <!-- 表单提交区域 -->
    <div class="card-body">
      <form @submit.prevent="add">
        <div class="row g-4">
          <!-- 课程名输入框 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">课程名</span>
              <input type="text" class="form-control" placeholder="请输入课程名" v-model.trim="subject" />
            </div>
          </div>
          <!-- 课程分数输入框 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">课程分数</span>
              <input type="text" class="form-control" placeholder="请输入课程分数" v-model.trim="Grade" />
            </div>
          </div>
          <!-- 课程种类下拉框 -->
          <div class="col-auto">
            <div class="input-group mb-3">
              <span class="input-group-text" id="basic-addon1">课程种类</span>
              <select class="form-select form-select-sm" v-model="selectedOption">
                <option v-for="option in options" :key="option.majorCode" :value="option.major">{{ option.major }}</option>
              </select>
            </div>
          </div>
          <!-- 添加按钮 -->
          <div class="col-auto">
            <button type="submit" class="btn btn-primary">添加</button>
          </div>
        </div>
      </form>
    </div>

    <!-- 表格区域 -->
    <table class="table table-striped table-hover table-bordered">
      <thead>
        <tr>
          <th scope="col">序号</th> <!-- 序号列 -->
          <th scope="col">课程名</th> <!-- 课程名列 -->
          <th scope="col">课程分数</th> <!-- 课程分数列 -->
          <th scope="col">课程种类</th> <!-- 课程种类列 -->
          <th scope="col">完成状态</th> <!-- 完成状态列 -->
          <th scope="col">操作</th> <!-- 操作列 -->
        </tr>
      </thead>
      <tbody>
        <!-- 遍历课程列表，动态生成表格行 -->
        <tr v-for="item in list" :key="item.id">
          <td>{{ item.id }}</td> <!-- 显示课程 ID -->
          <td>{{ item.subject }}</td> <!-- 显示课程名 -->
          <td>{{ item.Grade }}</td> <!-- 显示课程分数 -->
          <td>{{ item.major }}</td> <!-- 显示课程种类 -->
          <td>
            <!-- 完成状态切换开关 -->
            <div class="form-check form-switch">
              <input
                type="checkbox"
                class="form-check-input"
                role="switch"
                :id="'cb' + item.id" 
                v-model="item.status"
              />
              <label class="form-check-label" :for="'cb' + item.id" v-if="item.status">已修读</label> 
              <label class="form-check-label" :for="'cb' + item.id" v-else>未修读</label>
            </div>
          </td>
          <td>
            <!-- 删除链接，点击触发删除操作 -->
            <a href="javascript:;" @click="remove(item.id, item.status)">删除</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>